<template>
	<view class="cart-container">
		<!-- 地址操作区域 -->
		<view class="address-actions">
			<!-- 地址展示区域 - 默认显示，点击可编辑 -->
			<view v-if="showAddressInfo" class="address-display-container" @click="startEditingAddress">
				<view class="address-info">
					<text class="address-label">收货地址:</text>
					<text class="address-detail">{{ addressInfo.buildingName }} {{ addressInfo.detailAddress }}</text>
				</view>
				<view class="address-contact">
					<text class="contact-name">{{ addressInfo.realName }}</text>
					<text class="contact-phone">{{ addressInfo.phone }}</text>
				</view>
				<view class="change-address">修改地址</view>
			</view>

			<!-- 地址编辑区域 - 编辑时显示 -->
			<view v-if="isEditingAddress" class="address-edit-container">
				<view class="form-item">
					<text class="label">楼栋</text>
					<input class="input readonly-input" type="text" placeholder="输入楼栋" v-model="building"
						:disabled="true" @focus.stop @touchstart.stop />
				</view>
				<view class="form-item">
					<text class="label">详细地址</text>
					<input class="input" type="text" placeholder="输入门牌号" v-model="detailAddress" />
				</view>
				<view class="form-item">
					<text class="label">姓名</text>
					<input class="input" type="text" placeholder="输入姓名" v-model="name" />
				</view>
				<view class="form-item">
					<text class="label">联系电话</text>
					<input class="input" type="number" placeholder="输入联系电话" v-model="phone" @blur="validatePhone" />
					<text class="error-tip" v-if="phoneError">{{ phoneError }}</text>
				</view>
				<view class="btn-container">
					<button class="save-btn" @click="onSave">保存地址</button>
					<button class="cancel-btn" @click="cancelEditing">取消</button>
				</view>
			</view>

			<!-- 添加地址按钮 - 无地址时显示 -->
			<view v-if="!showAddressInfo && !isEditingAddress" class="add-address-container">
				<van-button type="primary" plain @click="startEditingAddress">添加收货地址</van-button>
			</view>
		</view>

		<!-- 购物车列表 -->
		<view class="cart-list">
			<!-- 空购物车状态 -->
			<view v-if="cartList.length === 0" class="empty-cart">
				<van-image src="/static/image/empty-cart.png" width="100px" height="100px" />
				<view class="empty-text">空空如也~</view>
				<van-button type="primary" @click="goShopping">去逛逛</van-button>
			</view>

			<!-- 商品列表 -->
			<van-cell-group v-else>
				<van-cell v-for="(item, index) in cartList" :key="item.id" clickable @click="toggleItemChecked(index)">
					<!-- 左侧勾选框 - 自定义多选框 -->
					<template #icon>
						<view class="custom-checkbox" :class="{ 'checked': item.checked }"
							@click.stop="toggleItemChecked(index)">
							<view class="check-icon" v-if="item.checked">✓</view>
						</view>
					</template>

					<!-- 商品内容 -->
					<view class="cart-item">
						<!-- 商品图片 -->
						<van-image :src="item.img || item.image || '/static/image/default-product.png'"
							class="item-image" mode="aspectFill" @load="onImageLoad" @error="onImageError" />

						<!-- 商品信息 -->
						<view class="item-info">
							<view class="item-name">{{ item.productName || item.name }}</view>
							<view class="item-price">
								<view class="price-row">
									<text class="original-price-label">原价:</text>
									<text class="original-price">¥{{ item.price }}</text>
									<text class="unit" v-if="item.unit">/{{ item.unit }}</text>
								</view>
								<view class="price-row" v-if="item.vipPrice">
									<text class="vip-price-label">会员价:</text>
									<text class="vip-price">¥{{ item.vipPrice }}</text>
								</view>
							</view>
						</view>

						<!-- 数量调整和删除按钮 -->
						<view class="quantity-delete-container">
							<view class="stepper-container" @click.stop>
								<van-stepper :value="item.quantity" @change="handleStepperChange(index, $event)" min="1"
									max="99" :disabled="!item.checked" />
							</view>
							<view class="delete-text" @click.stop="deleteItem(index)">删除</view>
						</view>
					</view>
				</van-cell>
			</van-cell-group>
		</view>

		<!-- 底部结算栏 -->
		<view class="bottom-bar">
			<!-- 全选按钮 - 自定义多选框 -->
			<view class="custom-checkbox1 bottom-checkbox1" :class="{ 'checked': checkAll }"
				@click.stop="toggleCheckAll">
				<view class="check-icon" v-if="checkAll">✓</view>
			</view>
			<text class="select-all-text" @click="toggleCheckAll">全选</text>

			<!-- 结算区域 -->
			<view class="settle-area">
				<view class="total-price-container">
					<view class="total-price">
						<text class="total-label">原价合计:</text>
						<text class="original-total-price">¥{{ originalTotalPrice.toFixed(2) }}</text>
					</view>
					<view class="vip-total-price">
						<text class="vip-total-label">会员价合计:</text>
						<text class="vip-total-value">¥{{ vipTotalPrice.toFixed(2) }}</text>
					</view>
				</view>
				<van-button type="warning" class="settle-btn" @click="handleSettle" :disabled="!hasSelectedItems">
					结算({{ selectedCount }})
				</van-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted,
		nextTick
	} from 'vue';

	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getPaymentInfo,
		getYueZhiFu // 引入余额支付接口
	} from '@/api/index.js'
	import {
		updateOrder,
		isVIPbyUserId
	} from '@/package/api/update.js';

	// 购物车数据
	const cartList = ref([]);
	const CART_STORAGE_KEY = 'shop_cart';
	const CART_QUANTITY_KEY = 'cart_quantity';

	// 地址编辑相关数据
	const building = ref('');
	const detailAddress = ref(''); // 详细地址字段
	const name = ref('');
	const phone = ref('');
	const phoneError = ref(''); // 手机号错误提示
	const loading = ref(false); // 加载状态
	const isEditingAddress = ref(false); // 编辑地址状态
	const isAddressSaved = ref(false); // 标记是否保存了新地址

	// 地址信息相关
	const addressInfo = ref({});
	const showAddressInfo = ref(false);
	const fromAddressPage = ref(false); // 标记是否从地址页面返回

	// 会员状态
	const isVip = ref(false); // 初始化为非会员

	// 引入地址API和订单API
	import {
		addAddressSuShe,
		addOrder
	} from '@/package/api/insertList.js';

	// 从本地存储加载购物车数据
	const loadCartFromStorage = () => {
		try {
			const storedCart = uni.getStorageSync(CART_STORAGE_KEY);
			console.log('?? 从本地存储加载购物车数据:', storedCart);

			if (storedCart && storedCart.length > 0) {
				cartList.value = storedCart.map(item => ({
					...item,
					quantity: parseInt(item.quantity || item.cartQuantity || 1),
					price: parseFloat(item.price) || 0,
					vipPrice: parseFloat(item.vipPrice) || 0,
					checked: true, // 默认选中所有商品
					img: item.img || '',
					image: item.image || ''
				}));
				console.log('✅ 成功加载购物车数据，共', cartList.value.length, '件商品');
				updateCheckStatus();
			} else {
				console.log('?? 购物车为空');
				cartList.value = [];
				checkAll.value = false;
			}
		} catch (error) {
			console.error('❌ 加载购物车数据失败:', error);
			cartList.value = [];
			checkAll.value = false;
		}
	};

	// 重置地址表单
	const resetAddressForm = () => {
		detailAddress.value = '';
		name.value = '';
		phone.value = '';
		phoneError.value = '';
		addressInfo.value = {};
		showAddressInfo.value = false;
		// building.value 不重置，保持从本地存储获取的值
	};

	// 保存购物车数据到本地存储
	const saveCartToStorage = () => {
		try {
			const validItems = cartList.value.map(item => ({
				...item,
				quantity: Math.max(1, parseInt(item.quantity || 1)),
				price: parseFloat(item.price).toFixed(2),
				vipPrice: parseFloat(item.vipPrice).toFixed(2),
				img: item.img || '',
				image: item.image || ''
			}));

			const compatibleCart = validItems.map(item => ({
				...item,
				cartQuantity: item.quantity,
				img: item.img || '',
				image: item.image || ''
			}));

			uni.setStorageSync(CART_STORAGE_KEY, compatibleCart);
			console.log('✅ 购物车数据已保存:', compatibleCart);
			updateTotalQuantity();
		} catch (error) {
			console.error('❌ 保存购物车数据失败:', error);
		}
	};

	// 更新购物车总数量
	const updateTotalQuantity = () => {
		try {
			const total = cartList.value.reduce((sum, item) => sum + parseInt(item.quantity), 0);
			uni.setStorageSync(CART_QUANTITY_KEY, total.toString());
			return total;
		} catch (error) {
			console.error('更新购物车数量失败:', error);
			return 0;
		}
	};

	// 全选状态
	const checkAll = ref(false);

	// 计算属性：原价合计金额
	const originalTotalPrice = computed(() => {
		return cartList.value.reduce((sum, item) => {
			const price = parseFloat(item.price) || 0;
			const quantity = parseInt(item.quantity) || 0;
			return item.checked ? sum + (price * quantity) : sum;
		}, 0);
	});

	// 计算属性：会员价合计金额
	const vipTotalPrice = computed(() => {
		return cartList.value.reduce((sum, item) => {
			const price = parseFloat(item.vipPrice) || 0;
			const quantity = parseInt(item.quantity) || 0;
			return item.checked ? sum + (price * quantity) : sum;
		}, 0);
	});

	// 已选商品数量
	const selectedCount = computed(() => {
		return cartList.value.filter(item => item.checked).length;
	});

	// 是否有选中商品
	const hasSelectedItems = computed(() => {
		return selectedCount.value > 0;
	});

	// 更新勾选状态
	const updateCheckStatus = () => {
		nextTick(() => {
			checkAll.value = cartList.value.length > 0 && cartList.value.every(item => item.checked);
		});
	};

	// 切换单个商品勾选
	const toggleItemChecked = (index) => {
		cartList.value[index].checked = !cartList.value[index].checked;
		updateCheckStatus();
		saveCartToStorage();
	};

	// 切换全选状态
	const toggleCheckAll = () => {
		const newCheckAllValue = !checkAll.value;
		checkAll.value = newCheckAllValue;

		nextTick(() => {
			cartList.value.forEach(item => {
				item.checked = newCheckAllValue;
			});
			saveCartToStorage();
		});
	};

	// 处理数量变化
	const handleStepperChange = (index, event) => {
		let newValue = event.detail || event;
		const numericValue = parseInt(newValue);

		if (isNaN(numericValue)) return;

		if (numericValue > 99) {
			cartList.value[index].quantity = 99;
			uni.showToast({
				title: '库存不足',
				icon: 'none'
			});
		} else if (numericValue < 1) {
			uni.showModal({
				title: '提示',
				content: '确定要移除该商品吗？',
				success: (res) => {
					if (res.confirm) cartList.value.splice(index, 1);
					else cartList.value[index].quantity = 1;
					saveCartToStorage();
					updateCheckStatus();
				}
			});
		} else {
			cartList.value[index].quantity = numericValue;
			saveCartToStorage();
		}
	};

	// 删除商品
	const deleteItem = (index) => {
		uni.showModal({
			title: '提示',
			content: '确定要删除该商品吗？',
			success: (res) => {
				if (res.confirm) {
					cartList.value.splice(index, 1);
					updateCheckStatus();
					saveCartToStorage();
				}
			}
		});
	};

	// 检查会员状态
	const checkMemberStatus = async () => {
		try {
			const response = await isVIPbyUserId();
			console.log('会员状态检查结果:', response);

			if (response.code === 200 && response.data === 200) {
				isVip.value = true;
				console.log('当前用户是会员');
			} else {
				isVip.value = false;
				console.log('当前用户不是会员');
			}
		} catch (error) {
			console.error('检查会员状态失败:', error);
			isVip.value = false; // 默认非会员
		}
	};

	// 结算处理
	const handleSettle = () => {
		const selectedItems = cartList.value.filter(item => item.checked);
		if (selectedItems.length === 0) {
			uni.showToast({
				title: '请选择商品',
				icon: 'none'
			});
			return;
		}

		if (!showAddressInfo.value) {
			uni.showModal({
				title: '提示',
				content: '请先添加收货地址',
				success: (res) => {
					if (res.confirm) {
						startEditingAddress();
					}
				}
			});
			return;
		}

		// 获取配送费和会员状态
		let deliveryFee = uni.getStorageSync('deliveryFee') || 0;
		deliveryFee = parseFloat(deliveryFee); // 确保为数字类型

		// 计算基础价格（不包含配送费）
		let baseTotalPrice = isVip.value ? vipTotalPrice.value : originalTotalPrice.value;
		let priceLabel = isVip.value ? '会员价格' : '原价';
		let priceValue = baseTotalPrice;
		let totalAmount = (baseTotalPrice + deliveryFee).toFixed(2);

		// 显示提示信息
		let tipMessage = `${priceLabel}：${priceValue.toFixed(2)}，配送费：¥${deliveryFee}，共：¥${totalAmount}`;
		uni.showToast({
			title: tipMessage,
			icon: 'none',
			duration: 2000 // 显示3秒钟
		});

		// 3秒后显示支付选项
		setTimeout(() => {
			// 唤起让用户选择微信支付还是余额支付
			uni.showActionSheet({
				itemList: ['微信支付', '余额支付'],
				success: (res) => {
					if (res.tapIndex === 0) {
						handleWechatPay(selectedItems, baseTotalPrice, deliveryFee); // 微信支付
					} else if (res.tapIndex === 1) {
						handleBalancePay(selectedItems, baseTotalPrice, deliveryFee,
							totalAmount); // 余额支付
					}
				},
				fail: (err) => {
					console.log(err);
				}
			});
		}, 3000);
	};

	// 统一订单创建逻辑
	const createOrder = async (items, baseTotalPrice, deliveryFee, paymentType) => {
		console.log('创建订单处理中，商品数量:', items.length);

		// 计算总金额（基础价格 + 配送费）
		const totalAmount = (baseTotalPrice + deliveryFee).toFixed(2);

		// 获取必要参数
		const addressId = addressInfo.value.id || null;
		const selectedBuildingId = uni.getStorageSync('selectedBuilding');
		const userId = uni.getStorageSync('userId') || null;

		// 构建商品信息数组
		const productInfo = items.map(item => ({
			productId: item.id || item.productId,
			productName: item.productName || item.name,
			quantity: item.quantity,
			unitPrice: item.vipPrice || item.price,
			totalPrice: (item.vipPrice || item.price) * item.quantity
		}));

		// 提取商品ID列表
		const productIds = productInfo.map(p => p.productId);
		console.log('购买的商品ID列表:', productIds);

		// 构建订单参数
		const orderParams = {
			products: productInfo,
			productIds: productIds,
			baseTotalPrice: baseTotalPrice,
			deliveryFee: deliveryFee,
			totalAmount: totalAmount,
			addressId: addressId,
			loudongId: selectedBuildingId,
			userId: userId,
			orderNo: `ORD${new Date().getTime()}`,
			paymentType: paymentType // 1=微信支付，2=余额支付
		};

		const jsonData = JSON.stringify(orderParams);
		console.log('订单创建接口参数:', orderParams);

		// 调用接口创建订单
		const res = await addOrder(jsonData);
		return {
			orderParams,
			res
		};
	};

	// 微信支付处理函数
	const handleWechatPay = async (items, baseTotalPrice, deliveryFee) => {
		console.log('微信支付处理中，商品数量:', items.length);

		try {
			// 创建订单
			const {
				orderParams,
				res
			} = await createOrder(items, baseTotalPrice, deliveryFee, 1);

			if (res.code == 200) {
				let payData = {
					orderNo: orderParams.orderNo
				}
				let payres = await getPaymentInfo(payData);
				console.log(payres, 123)
				if (payres.code == 200) {
					wx.requestPayment({
						timeStamp: payres.data.jsConfig.timeStamp,
						nonceStr: payres.data.jsConfig.nonceStr,
						package: payres.data.jsConfig.packageVal,
						paySign: payres.data.jsConfig.paySign,
						signType: payres.data.jsConfig.signType, // 该参数为固定值
						success(res) {
							uni.showToast({
								title: '支付成功',
								icon: 'none'
							})
							// 根据订单状态修改订单状态 修改成为已支付
							let data = {
								orderNo: orderParams.orderNo,
								status: 1
							}
							updateOrderStatus(JSON.stringify(data))

							// 将本地存储中的购物车相关进行清空 
							clearCartFromStorage();

							// 跳转页面
							uni.switchTab({
								url: '/pages/index/index'
							});
						},
						fail(err) {
							// 支付失败回调
							console.error('唤起支付组件失败：', err);
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
							//根据订单状态修改订单状态 修改成为已取消
							let data = {
								orderNo: orderParams.orderNo,
								status: 3
							}
							updateOrderStatus(JSON.stringify(data))
						}
					});
				}
			}
		} catch (error) {
			console.error('微信支付处理异常:', error);
			uni.showToast({
				title: '支付处理失败，请重试',
				icon: 'none'
			});
		}
	};
	// 余额支付处理函数
	const handleBalancePay = async (items, baseTotalPrice, deliveryFee, totalAmount) => {
		console.log('余额支付处理中，商品数量:', items.length, '总金额:', totalAmount);

		try {
			// 创建订单
			const {
				orderParams,
				res
			} = await createOrder(items, baseTotalPrice, deliveryFee, 2);

			if (res.code === 200) {
				// 准备余额支付参数（注意totalAmount需要转换为BigDecimal格式，后端接收字符串或数字）
				const yueZhiFuParams = {
					orderNo: orderParams.orderNo,
					totalAmount: totalAmount // 假设后端接受字符串形式的金额
				};

				// 显示加载中
				uni.showLoading({
					title: '支付处理中...'
				});

				// 调用余额支付接口
				const payRes = await getYueZhiFu(yueZhiFuParams);

				// 隐藏加载
				uni.hideLoading();

				if (payRes.code === 200) {
					// 余额支付成功
					uni.showModal({
						title: '支付结果',
						content: payRes.message || '余额支付成功',
						showCancel: false,
						success: () => {
							// 更新订单状态为已支付
							updateOrderStatus({
								orderNo: orderParams.orderNo,
								status: 1
							});

							// 清空购物车
							clearCartFromStorage();

							// 跳转首页
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					});
				} else if (payRes.code === 400) { // 假设后端余额不足返回400错误
					// 余额不足提示（根据后端返回状态码判断）
					uni.showToast({
						title: payRes.message || '账户余额不足，请先充值',
						icon: 'none'
					});
				} else {
					// 其他错误提示
					uni.showToast({
						title: payRes.message || '余额支付失败，请重试',
						icon: 'none'
					});
				}
			}
		} catch (error) {
			console.error('余额支付处理异常:', error);
			uni.hideLoading();
			uni.showToast({
				title: '支付处理失败，请重试',
				icon: 'none'
			});
		}
	};

	// 清空购物车数据
	const clearCartFromStorage = () => {
		try {
			// 清空购物车数据
			uni.removeStorageSync(CART_STORAGE_KEY);
			// 清空购物车数量
			uni.removeStorageSync(CART_QUANTITY_KEY);
			// 重置本地数据
			cartList.value = [];
			console.log('✅ 购物车已清空');
		} catch (error) {
			console.error('❌ 清空购物车失败:', error);
		}
	};


	const updateOrderStatus = async (data) => {
		const res = await updateOrder(data)
	}


	// 去购物
	const goShopping = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	// 开始编辑地址
	const startEditingAddress = () => {
		isEditingAddress.value = true;
		console.log(uni.getStorageSync('selectedBuildingText'))
		// 加载本地存储的楼栋信息
		const selectedBuildingText = uni.getStorageSync('selectedBuildingText');
		building.value = selectedBuildingText || '未选择楼栋';
	};

	// 取消编辑地址
	const cancelEditing = () => {
		isEditingAddress.value = false;
		resetAddressForm();
	};

	// 显示加载提示
	const showLoading = (title = '加载中') => {
		loading.value = true;
		uni.showLoading({
			title,
			mask: true
		});
	};

	// 隐藏加载提示
	const hideLoading = () => {
		loading.value = false;
		uni.hideLoading();
	};

	// 显示提示框
	const showToast = (title, icon = 'none', duration = 2000) => {
		uni.showToast({
			title,
			icon,
			duration
		});
	};

	// 手机号验证（失焦时触发）
	const validatePhone = () => {
		if (phone.value) {
			const isValid = validateChinaPhone(phone.value + '');
			if (!isValid) {
				phoneError.value = '请输入正确的手机号码';
			} else {
				phoneError.value = '';
			}
		}
	};

	// 严谨的中国大陆手机号正则（覆盖所有号段）
	const validateChinaPhone = (phone) => {
		const reg = /^1[3-9]\d{9}$/;
		return reg.test(phone);
	};

	// 保存地址逻辑（关键修改点：获取detailAddress并传递detail属性）
	const onSave = async () => {
		// 表单验证
		if (!building.value || !detailAddress.value || !name.value || !phone.value) {
			showToast('请填写完整信息');
			return;
		}

		// 手机号验证
		if (!validateChinaPhone(phone.value + '')) {
			showToast('请输入正确的手机号码');
			return;
		}

		// 显示加载中
		showLoading('保存中...');
		const selectedBuildingText = uni.getStorageSync('selectedBuildingText');
		const selectedBuildingId = uni.getStorageSync('selectedBuilding');
		const storedSchoolName = uni.getStorageSync("school_name");
		const storedSchoolId = uni.getStorageSync('school_id');

		try {
			// 封装请求参数（新增detail属性，值为detailAddress）
			const addressData = {
				buildingId: selectedBuildingId,
				buildingName: selectedBuildingText,
				schoolId: storedSchoolId,
				schoolName: storedSchoolName,
				realName: name.value,
				phone: phone.value + '',
				detailAddress: detailAddress.value, // 原详细地址字段
				detail: detailAddress.value, // 新增的detail属性，值与详细地址相同
			};

			// 调用后台接口
			const response = await addAddressSuShe(addressData);

			// 隐藏加载
			hideLoading();

			if (response.code === 200) {
				showToast('保存成功', 'success');

				// 存储地址信息
				const addressId = response.data; // 假设接口返回的ID在data字段
				const addressInfoData = {
					id: addressId,
					buildingName: building.value,
					realName: name.value,
					phone: phone.value,
					detailAddress: detailAddress.value,
					detail: detailAddress.value, // 保存新增的detail属性
					createTime: new Date().toISOString() // 添加创建时间
				};

				// 更新显示的地址信息
				addressInfo.value = addressInfoData;
				showAddressInfo.value = true;
				isAddressSaved.value = true;

				// 保存成功后退出编辑状态
				isEditingAddress.value = false;
			} else {
				showToast(response.message || '保存失败，请重试');
			}
		} catch (error) {
			// 隐藏加载
			hideLoading();
			console.error('保存地址失败', error);
			showToast('保存失败，请重试');
		}
	};

	// 图片事件
	const onImageLoad = (e) => console.log('图片加载成功:', e);
	const onImageError = (e) => {
		console.error('图片加载失败:', e);
		uni.showToast({
			title: '图片加载失败',
			icon: 'none'
		});
	};

	// 监听数据变化
	watch(cartList, () => {
		updateCheckStatus();
		saveCartToStorage();
	}, {
		deep: true
	});

	// 监听地址信息变化
	watch(addressInfo, () => {}, {
		deep: true
	});

	// 生命周期
	onMounted(() => {
		loadCartFromStorage();
		fromAddressPage.value = false;
		resetAddressForm();

		// 加载本地存储的楼栋信息
		const selectedBuildingText = uni.getStorageSync('selectedBuildingText');
		building.value = selectedBuildingText || '未选择楼栋';

		// 检查会员状态
		checkMemberStatus();
	});

	onShow(() => {
		loadCartFromStorage();

		// 加载本地存储的楼栋信息
		const selectedBuildingText = uni.getStorageSync('selectedBuildingText');
		building.value = selectedBuildingText || '未选择楼栋';
		console.log('楼栋信息:', building.value);

		if (isAddressSaved.value) {
			isAddressSaved.value = false;
		}

		// 每次页面显示时检查会员状态
		checkMemberStatus();
	});
</script>
<style scoped>
	/* 全局样式 */
	.cart-container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 地址操作区域样式 */
	.address-actions {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 10px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	/* 地址展示区域样式 */
	.address-display-container {
		padding: 15px 0;
	}

	.address-info,
	.address-contact {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.address-label {
		font-size: 14px;
		color: #666;
		margin-right: 10px;
		width: 60px;
	}

	.address-detail {
		font-size: 16px;
		color: #333;
		flex: 1;
	}

	.contact-name,
	.contact-phone {
		font-size: 16px;
		color: #333;
	}

	.contact-phone {
		margin-left: 20px;
	}

	.change-address {
		font-size: 14px;
		color: #3c91ff;
		text-align: right;
	}

	/* 添加地址按钮样式 */
	.add-address-container {
		padding: 15px;
		text-align: center;
		background-color: #fff;
		margin-bottom: 10px;
	}

	/* 地址编辑区域样式 */
	.address-edit-container {
		padding: 15px 0;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20px;
	}

	.label {
		width: 100%;
		font-size: 14px;
		color: #333;
		margin-bottom: 8px;
	}

	.input {
		width: 100%;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		color: #333;
		border: 1px solid #eee;
		border-radius: 4px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* 只读输入框样式 */
	.readonly-input {
		background-color: #f5f5f5;
		color: #666;
		cursor: not-allowed;
	}

	/* 错误提示样式 */
	.error-tip {
		font-size: 12px;
		color: #ff5a5f;
		margin-top: 4px;
	}

	/* 按钮容器 */
	.btn-container {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.save-btn,
	.cancel-btn {
		width: 48%;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		border-radius: 20px;
	}

	.save-btn {
		background-color: #ff7d00;
		color: #fff;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;
	}

	/* 空购物车状态 */
	.empty-cart {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
	}

	.empty-text {
		margin: 20px 0;
		color: #999;
		font-size: 16px;
	}

	/* 购物车列表 */
	.cart-list {
		margin-bottom: 60px;
	}

	.cart-item {
		display: flex;
		align-items: center;
		padding: 10px 0;
		min-height: 100px;
	}

	.van-cell__icon {
		margin-right: 15px;
	}

	.item-image {
		width: 80px;
		height: 80px;
		margin-right: 10px;
		margin-left: 10px;
		border-radius: 8px;
		background-color: #f5f5f5;
		box-sizing: border-box;
		border: 1px solid #eee;
		object-fit: cover;
	}

	.item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 10px;
	}

	.item-name {
		font-size: 16px;
		font-weight: 500;
		margin-bottom: 5px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.item-price {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.price-row {
		display: flex;
		align-items: center;
		margin-bottom: 2px;
	}

	.original-price-label,
	.vip-price-label {
		font-size: 14px;
		color: #666;
		margin-right: 5px;
	}

	.original-price {
		font-size: 16px;
		color: #999;
		margin-right: 15px;
	}

	.vip-price {
		font-size: 16px;
		color: #ff9800;
		margin-right: 15px;
	}

	.unit {
		font-size: 12px;
		color: #999;
		margin-left: 5px;
	}

	/* 底部结算栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 65px;
		background-color: #fff;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		padding: 0 15px;
		z-index: 100;
		transform: translateY(-5px);
	}

	.settle-area {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.total-price-container {
		margin-right: 15px;
		text-align: right;
	}

	.total-price {
		margin-bottom: 2px;
	}

	.vip-total-price {
		color: #ff9800;
	}

	.total-label,
	.vip-total-label {
		font-size: 14px;
		color: #666;
	}

	.original-total-price {
		font-size: 16px;
		color: #999;
	}

	.vip-total-value {
		font-size: 18px;
		color: #ff9800;
		font-weight: 500;
	}

	.settle-btn {
		height: 35px;
		padding: 0 20px;
		font-size: 16px;
		border-radius: 20px;
		white-space: nowrap;
	}

	/* 自定义多选框样式 */
	.custom-checkbox {
		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-top: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.custom-checkbox1 {
		width: 20px;
		height: 20px;
		border: 1px solid #ccc;
		border-radius: 3px;
		margin-top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom-checkbox1 {
		margin-right: 5px;
	}

	.select-all-text {
		margin-right: 10px;
		font-size: 14px;
	}

	.custom-checkbox.checked,
	.custom-checkbox1.checked {
		background-color: #3c91ff;
		border-color: #3c91ff;
	}

	.check-icon {
		color: #fff;
		font-size: 14px;
	}

	.stepper-container {
		padding: 5px;
	}

	.quantity-delete-container {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}

	.delete-text {
		color: #ff4d4f;
		text-decoration: underline;
		font-size: 14px;
		margin-top: 5px;
		cursor: pointer;
	}

	.readonly-input {
		background-color: #f5f5f5;
		color: #666;
		cursor: not-allowed;
		pointer-events: none;
		opacity: 0.8;
	}
</style>